<template>
  <div
    id="shopDet"
    class="main df"
    style="align-items: normal; justify-content: space-between"
  >
    <div class="left">
      <div class="df" style="align-items: normal; margin-top: 20px">
        <div>
          <div class="img-box">
            <img class="img" :src="bigPic" alt="" />
            <div class="df" style="margin-top: 5px">
              <img
                class="banner-pic"
                :class="{ active: isActive == index }"
                @mouseenter="handleEnter(item, index)"
                v-for="(item, index) in goodsDetData.bannersPicUrl"
                :key="item"
                :src="item"
                alt=""
              />
            </div>
          </div>
        </div>
        <div>
          <div>{{ goodsDetData.name }}</div>
          <div class="f14" style="color: #666; margin: 20px 0 30px 0">
            {{ goodsDetData.miniProgramDescription }}
          </div>
          <div class="df">
            <div class="df" style="color: red">
              <div>限时：</div>
              <div class="df">
                <div class="f12">￥</div>
                <div
                  style="
                    font-size: 30px;
                    margin-bottom: 10px;
                    margin-right: 40px;
                  "
                >
                  {{ goodsDetData.realPrice }}
                </div>
              </div>
            </div>
            <div style="color: #999; text-decoration: line-through">
              原价 <span>￥</span> {{ goodsDetData.basePrice }}
            </div>
          </div>
          <div class="btn-box">
            <el-button class="btn" @click="handleBuy">购买服务</el-button>
            <div class="lighting"></div>
          </div>
          <div class="hot-phone">咨询热线：{{ goodsDetData.phone }}</div>
        </div>
      </div>
      <div style="margin-top: 20px" class="f24">详情介绍</div>
      <div
        style="
          width: 100%;
          border-bottom: 1px solid black;
          margin: 5px 0 10px 0;
        "
      ></div>
      <div v-html="goodsDetData.pcDescription"></div>
    </div>
    <div class="right-card">
      <teacher-team :expertsTeamList="expertsTeamList" />
    </div>
  </div>
  <buy-mask ref="maskRef" :goodsDetData="goodsDetData" />
</template>

<script setup>
import { getServicesGet, getExpertsTeamList } from '@/api/shopServe/shopServe';
import TeacherTeam from '@/views/shopServe/components/TeacherTeam';
import BuyMask from './components/BuyMask';
import noGood from '@/assets/images/noGood.png';

import { ref } from 'vue';

import { useRoute } from 'vue-router';
const maskRef = ref(null);
const bigPic = ref('');
const isActive = ref(0);
const route = useRoute();
const handleBuy = () => {
  maskRef.value.handleChangeMask(true);
};
const handleEnter = (item, index) => {
  isActive.value = index;
  bigPic.value = item;
};
const handleRouteData = () => {
  fetchServicesGet(route.query.id);
};
const goodsDetData = ref({});
const fetchServicesGet = (id) => {
  getServicesGet({ id }).then((res) => {
    if (res.data.code == 20000) {
      goodsDetData.value = res.data.data;
      if (res.data.data.bannersPicUrl) {
        goodsDetData.value.bannersPicUrl =
          res.data.data.bannersPicUrl.split(',');
      } else {
        goodsDetData.value.bannersPicUrl = [noGood];
      }

      bigPic.value = goodsDetData.value.bannersPicUrl[0];
    }
  });
};
const expertsTeamList = ref([]);
const fetchExpertsTeamList = () => {
  getExpertsTeamList().then((res) => {
    if (res.data.code == 20000) {
      expertsTeamList.value = res.data.data.slice(0, 3);
    }
  });
};
handleRouteData();
fetchExpertsTeamList();
</script>

<style lang="scss" scoped>
#shopDet {
  padding: 20px;
  .banner-pic {
    width: 80px;
    height: 60px;
    margin: 0 10px 0 0;
    cursor: pointer;
  }
  .banner-pic:nth-child(4) {
    margin-right: 0px;
  }
  .img-box {
    margin-right: 20px;
    .img {
      width: 350px;
      height: 255px;
    }
  }
  .btn-box {
    height: 50px;
    .btn {
      height: 40px;
      width: 320px;
      background-color: var(--background-color);
      color: var(--text-color);
    }
    .lighting {
      width: 30px;
      height: 60px;
      position: relative;
      top: -55px;
      left: -80px;
      transform: rotate(15deg);
      -webkit-transform: rotate(15deg);
      -webkit-animation: lighting 1.2s linear infinite forwards;
      -moz-animation: lighting 1.2s linear infinite forwards;
      animation: lighting 1.2s linear infinite forwards;
      background: rgba(255, 255, 255, 0.4);
      z-index: 1;
    }
    @keyframes lighting {
      from {
        left: 0px; /* 起始位置 */
      }
      to {
        left: calc(100% + 0px); /* 结束位置，需根据实际情况调整偏移量 */
      }
    }
  }
  .hot-phone {
    height: 21px;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    line-height: 21px;
  }
}
.active {
  border: 1px solid var(--color-text);
}
</style>
